<template>
  <!-- 登录页面主容器 -->
  <div class="rr-login">
    <!-- 登录页面内容包装器 -->
    <div class="rr-login-wrap">
      <!-- 左侧区域：在小屏幕上隐藏 -->
      <div class="rr-login-left hidden-sm-and-down">
        <p class="rr-login-left-title">人人权限系统</p>
      </div>

      <!-- 右侧区域：包含登录表单 -->
      <div class="rr-login-right">
        <div class="rr-login-right-main">
          <h4 class="rr-login-right-main-title">登录</h4>
          <!-- 登录表单：使用Element Plus的表单组件，支持回车键提交 -->
          <el-form ref="formRef" label-width="80px" :status-icon="true" :model="login" :rules="rules" @keyup.enter="onLogin">
            <!-- 用户名输入框 -->
            <el-form-item label-width="0" prop="username">
              <el-input v-model="login.username" placeholder="用户名" prefix-icon="user" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 密码输入框：带有显示/隐藏密码功能 -->
            <el-form-item label-width="0" prop="password">
              <el-input placeholder="密码" v-model="login.password" prefix-icon="lock" autocomplete="off" show-password></el-input>
            </el-form-item>
            <!-- 验证码输入框和图片 -->
            <!-- 注释或删除验证码表单项 -->
            <!--
            <el-form-item label-width="0" prop="captcha">
              <el-space class="rr-login-right-main-code">
                <el-input v-model="login.captcha" placeholder="验证码" prefix-icon="first-aid-kit"></el-input>
                <img style="vertical-align: middle; height: 40px; cursor: pointer" :src="state.captchaUrl" @click="onRefreshCode" alt="" />
              </el-space>
            </el-form-item>
            -->
            <!-- 登录按钮：加载中时禁用 -->
            <el-form-item label-width="0">
              <el-button type="primary" size="small" :disabled="state.loading" @click="onLogin" class="rr-login-right-main-btn"> 登录 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 页脚区域：包含链接和版权信息 -->
    <div class="login-footer">
      <p><a href="https://www.renren.io/enterprise" target="_blank">企业版</a> | <a href="https://www.renren.io/cloud" target="_blank">微服务版</a></p>
      <p><a href="https://www.renren.io/" target="_blank">人人开源</a>{{ state.year }} © renren.io</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
// Vue 核心功能导入
import { onMounted, reactive, ref } from "vue";
// 项目常量、服务和工具函数导入
import { CacheToken } from "@/constants/cacheKey"; // 缓存Token的键名常量
import baseService from "@/service/baseService"; // 基础API服务
import { setCache } from "@/utils/cache"; // 缓存设置工具
import { ElMessage } from "element-plus"; // Element Plus消息提示组件
import { getUuid } from "@/utils/utils"; // UUID生成工具
import app from "@/constants/app"; // 应用常量配置
import SvgIcon from "@/components/base/svg-icon/index"; // SVG图标组件
// 状态管理和路由导入
import { useAppStore } from "@/store"; // Pinia状态管理
import { useRouter } from "vue-router"; // Vue Router路由

// 获取状态管理实例和路由实例
const store = useAppStore();
const router = useRouter();

// 页面状态数据，使用reactive使其具有响应性
const state = reactive({
  captchaUrl: "", // 验证码图片URL
  loading: false, // 登录按钮加载状态
  year: new Date().getFullYear() // 当前年份，用于页脚版权信息
});

// 登录表单数据
const login = reactive({ username: "", password: "", captcha: "", uuid: "" });

// 组件挂载时执行
onMounted(() => {
  // 清理之前的登录状态
  store.logout();
  // 获取验证码
  // getCaptchaUrl();
});

// 表单引用，用于表单验证
const formRef = ref();

// 表单验证规则
const rules = ref({
  username: [{ required: true, message: "必填项不能为空", trigger: "blur" }], // 用户名验证规则
  password: [{ required: true, message: "必填项不能为空", trigger: "blur" }], // 密码验证规则
  // captcha: [{ required: true, message: "必填项不能为空", trigger: "blur" }]  // 验证码验证规则
});

/**
 * 获取验证码URL
 * 生成UUID并构建验证码请求地址
 */
const getCaptchaUrl = () => {
  login.uuid = getUuid(); // 生成唯一标识符
  state.captchaUrl = `${app.api}/captcha?uuid=${login.uuid}`; // 构建验证码URL
};

/**
 * 刷新验证码
 * 当验证码无法识别或过期时使用
 */
const onRefreshCode = () => {
  getCaptchaUrl();
};

/**
 * 登录处理函数
 * 验证表单 -> 直接模拟登录成功 -> 跳转到首页
 */
const onLogin = () => {
  // 表单验证
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      // 设置加载状态
      state.loading = true;
      
      // 模拟登录成功，不再发送请求到后端
      setTimeout(() => {
        // 请求完成，取消加载状态
        state.loading = false;
        
        // 保存模拟的token到缓存
        const mockToken = { token: "mock-token-" + new Date().getTime() };
        setCache(CacheToken, mockToken, true);
        
        // 更新应用状态
        store.updateState({
          appIsLogin: true,
          user: {
            id: "1",
            username: login.username,
            realName: login.username,
            superAdmin: 1, // 设为超级管理员以避免权限问题
            headUrl: ""
          },
          permissions: ["*:*:*"] // 给予所有权限
        });
        
        // 显示成功消息
        ElMessage.success("登录成功");
        
        // 跳转到首页
        router.push("/");
      }, 500); // 添加短暂延迟，模拟网络请求
    }
  });
};
</script>

<style lang="less" scoped>
/* 导入基础样式 */
@import url("@/assets/theme/base.less");

/* 登录页面主容器样式 */
.rr-login {
  width: 100vw;
  height: 100vh;
  background: #019ec4;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* 响应式设计：小于992px的屏幕适配 */
  @media only screen and (max-width: 992px) {
    .rr-login-wrap {
      width: 96% !important; /* 在小屏幕上几乎占满宽度 */
    }
    .rr-login-right {
      width: 100% !important; /* 右侧区域占满整个宽度 */
    }
  }

  /* 登录内容包装器 */
  &-wrap {
    margin: 0 auto;
    width: 1000px; /* 固定宽度 */
    box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); /* 阴影效果 */
    animation-duration: 1s;
    animation-fill-mode: both;
    border-radius: 5px; /* 圆角边框 */
    overflow: hidden; /* 隐藏溢出内容 */
  }

  /* 左侧区域样式 */
  &-left {
    justify-content: center;
    flex-direction: column;
    background-color: @--color-primary; /* 使用主题色 */
    color: #fff;
    float: left;
    width: 50%; /* 占据一半宽度 */

    /* 左侧标题样式 */
    &-title {
      text-align: center;
      color: #fff;
      font-weight: 300;
      letter-spacing: 2px; /* 字间距 */
      font-size: 32px;
    }
  }

  /* 右侧区域样式 */
  &-right {
    border-left: none;
    color: #fff;
    background-color: #fff;
    width: 50%; /* 占据一半宽度 */
    float: left;

    /* 右侧主要内容区域 */
    &-main {
      margin: 0 auto;
      width: 65%; /* 内容区域宽度 */
      
      /* 标题样式 */
      &-title {
        color: #333;
        margin-bottom: 40px;
        font-weight: 500;
        font-size: 24px;
        text-align: center;
        letter-spacing: 4px; /* 字间距 */
      }

      /* 语言选择图标样式 */
      &-lang .iconfont {
        font-size: 20px;
        color: #606266;
        font-weight: 800;
        width: 20px;
        height: 20px;
      }

      /* 输入框样式自定义 */
      .el-input__inner {
        border-width: 0;
        border-radius: 0;
        border-bottom: 1px solid #dcdfe6; /* 只有底部边框 */
      }

      /* 验证码区域样式 */
      &-code {
        width: 100%;
        .el-space__item:first-child {
          flex: 1; /* 输入框占据剩余空间 */
        }
      }
      
      /* 登录按钮样式 */
      &-btn {
        width: 100%;
        height: 45px;
        font-size: 18px !important;
        letter-spacing: 2px;
        font-weight: 300 !important;
        cursor: pointer;
        margin-top: 30px;
        font-family: neo, sans-serif;
        transition: 0.25s; /* 过渡效果 */
      }
    }
  }

  /* 页脚样式 */
  .login-footer {
    text-align: center;
    position: absolute;
    bottom: 0; /* 固定在底部 */
    padding: 20px;
    color: rgba(255, 255, 255, 0.6); /* 半透明白色 */
    p {
      margin: 10px 0;
    }
    /* 链接样式 */
    a {
      padding: 0 5px;
      color: rgba(255, 255, 255, 0.6);
      /* 链接悬停和聚焦状态 */
      &:focus,
      &:hover {
        color: #fff; /* 完全不透明白色 */
      }
    }
  }

  /* 左右两侧共有的样式 */
  &-left,
  &-right {
    position: relative;
    min-height: 500px; /* 最小高度 */
    align-items: center;
    display: flex; /* 使用弹性布局 */
  }

  /* 定义从上到下的动画效果 */
  @keyframes animate-down {
    0%,
    60%,
    75%,
    90%,
    to {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); /* 缓动函数 */
    }
    0% { /* 初始状态 */
      opacity: 0;
      transform: translate3d(0, -3000px, 0); /* 从上方很远的地方开始 */
    }
    60% { /* 60%时的状态 */
      opacity: 1;
      transform: translate3d(0, 25px, 0); /* 略微超过目标位置 */
    }
    75% { /* 75%时的状态 */
      transform: translate3d(0, -10px, 0); /* 向上反弹 */
    }
    90% { /* 90%时的状态 */
      transform: translate3d(0, 5px, 0); /* 向下反弹 */
    }
    to { /* 最终状态 */
      transform: none; /* 回到原位 */
    }
  }

  /* 应用动画的类 */
  .animate-down {
    animation-name: animate-down; /* 使用上面定义的动画 */
  }
}
</style>
